<!DOCTYPE html>
<html>
<head>
<title>Module Develop</title>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<style type="text/css">
	html,body{
		height: 100%
	}
	body{
		background-color: #fff;
	    margin: 0;
	}
	#wrap{
	    height: 100%;
	    position: relative;
	}
	#header{
		background-color: #5082c2;
		height: 44px;
	    position: relative;
	}
	#header h1{
	    font-size: 20px; 
	    height: 44px; 
	    line-height: 44px; 
	    margin: 0em; 
	    color: #fff;
		margin-left: 100px;
		margin-right: 100px;
		text-align: center;
	}
  #main{
      display: block;
  }
  a.button{
      display: -webkit-box;
      -webkit-box-pack: center;
      -webkit-box-align: center;
      height: 36px;
      margin: 8px;
      background-color: rgba(240,240,240,1.0);
      border-color: rgba(220,220,220,1.0);
      border-width: 2px;
      border-style: solid;
	}
  a.active{
      background-color: rgba(240,240,240,0.6);
	}
</style>
</head>
<body>
	<div id="wrap">
	    <header id="header">
	    	<h1 id="title">DEMO模块</h1>
	    </header>
	    <div id="main">
            <a class="button" tapmode="active" onclick="showAlert()">普通方法测试</a>
            <a class="button" tapmode="active" onclick="getSystemVersion()">同步方法测试</a>
        </div>
    </div>
</body>
<script>
	function showAlert() {
		var demo = api.require('moduleDemo');
		demo.showAlert({
			title: '提示',
			msg: 'Hello App!'
		},function(ret, err){
		  var msg = "点击了第" + ret.index + "个按钮";
		  api.toast({
			  msg: msg,
			  location: 'middle'
		  });
		});
	}

	function getSystemVersion() {
		var demo = api.require('moduleDemo');
		var version = demo.systemVersion();
		var msg = '系统版本是：' + version;
		api.toast({
			msg: msg,
			location: 'middle'
		});
	}

	function apiready() {
		var header = document.getElementById('header');
		header.style.paddingTop = api.safeArea.top + 'px';

		api.removeLaunchView();
	}
</script>
</html>
